<template>
  <div>
    <NormalForm pageTitle="引流链接" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card" style="padding:0 0 0 20px">
      <div class="right-btn">
        <el-button type="info" icon="el-icon-del" @click="beathDel" :disabled="selectedRow.length == 0" v-hasPermi="['admin:link:beath:delete']" plain>批量删除
        </el-button>
        <el-button type="primary" icon="el-icon-plus" @click="goRoute" v-hasPermi="['admin:link:add']">创建链接
      </el-button>
      </div>
      <el-table v-loading="loading" :data="tableList" style="width: 100%" height="442px" @select="handleSelectionChange" @select-all="handleSelectAll" :row-key="(row) => { return row.linkId }">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="链接名称" align="center" prop="linkName" min-width="180px" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span style="color: #082aff; cursor: pointer" @click="detailLink(row.linkId)">{{ row.linkName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="获客类型" prop="drainageType" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div>{{ drainageOpt[row.drainageType] }}</div>
          </template>
        </el-table-column>
        <el-table-column label="使用人员/群" align="center" prop="codeName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="浏览量" align="center" prop="browseNum" show-overflow-tooltip />
        <el-table-column label="创建人" align="center" prop="createBy" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="链接状态" align="center" prop="linkStates" width="160px">
          <template slot-scope="{ row, $index }">
            <div>
              <el-switch v-model="row.linkStates" :active-value="0" :inactive-value="1"
                         @change="switchChange($index, $event)">
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="270" class-name="small-padding">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: space-evenly">
              <el-button size="mini" type="text" @click="copyLink(row.linkId)"
                         v-hasPermi="['admin:link:add']">复制</el-button>
              <el-button size="mini" type="text" @click="editLink(row.linkId)"
                v-hasPermi="['admin:link:updateStates']">编辑</el-button>
              <el-button size="mini" type="text" @click="handleCopy()" class="tag-copy"
                :data-clipboard-text="row.drainageType == 3 ? shortPrefixUrl + row.shortLink : jumpSAppUrl + row.linkId">复制链接</el-button>
              <el-button size="mini" type="text" @click="toStatistics(row.linkId)" autofocus v-has-permi="['admin:link:drainageLinkStatistics']">数据详情</el-button>
              <el-button size="mini" type="text" @click="deleteItem(row.linkId)" autofocus
                v-hasPermi="['admin:link:delete']">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
    <!-- 删除table数据 -->
    <el-dialog title="删除" :visible.sync="delTable" width="400px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <span>确认删除所选中的数据吗？</span>
      <div slot="footer">
        <el-button type="info" plain @click="cancelDel">取 消</el-button>
        <el-button type="primary" @click="deleteLink" :loading="delLoding">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { linkList, deleteLink, updateStates } from "@/api/communityOperating/drainageLink";

export default {
  name: "DrainageLink",
  data() {
    return {
      queryForm: {
        linkName: "",
        drainageType: null,
        deptId: null,
        createCodeList: [],
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '链接名称',
          value: '',
          prop: 'linkName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '引流类型',
          value: '',
          prop: 'drainageType',
          type: 'SELECT',
          emunName: 'drainageList'
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'createCodeList',
          type: 'STAFF',
          emunName: ''
        },
      ],
      enumOpt: {
        drainageList: []
      },
      drainageOpt: {},
      loading: false,
      total: 0,
      tableList: [],
      delTable: false,
      linkId: "",
      delLoding: false,
      // prefixUrl: window.globalConfig.ONTINT_URL + "/scrm-api/link/open/", // 地址前缀
      jumpSAppUrl: window.globalConfig.JUMPSAPPURL_SHORT_LINK,
      shortPrefixUrl: window.globalConfig.SHARE_SHORT_LINK,
      selectedRow: [],
    };
  },
  created() {
    // 引流类型
    this.getDicts("drainage_type").then((res) => {
      if (res.code === 200) {
        this.enumOpt.drainageList = res.data;
        res.data.forEach(item => {
          this.drainageOpt[item.dictValue] = item.dictLabel
        });
      }
    });
  },
  mounted() {
    this.handleQuery();
  },
  methods: {
    // 重置
    handleReset() {
      this.queryForm = {
        linkName: "",
        drainageType: null,
        deptId: null,
        createCodeList: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.getListFn();
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      let obj = {
        hkOpenFlag: 0,
        linkName: this.queryForm.linkName,
        drainageType: this.queryForm.drainageType,
        deptId: this.queryForm.deptId,
        createCodeList: this.queryForm.createCodeList + '',
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      };
      this.loading = true;
      linkList(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.data.rows || [];
          this.total = res.data.total || 0;
        }
        this.loading = false;
      });
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
    // 创建链接
    goRoute() {
      this.$router.push({
        name: "AddDrainageLink",
        query: {
          operateFlag: 'ADD'
        }
      });
    },
    // 复制
    copyLink(id) {
      this.$router.push({
        name: "AddDrainageLink",
        query: {
          linkId: id,
          operateFlag: 'ADD'
        }
      });
    },
    // 状态修改
    switchChange(index, event) {
      let obj = {
        linkId: this.tableList[index].linkId,
        linkStates: event,
      };
      updateStates(obj).then((res) => {
        if (res.code === 200) {
          this.$message.success('状态修改成功')
          this.getListFn();
        }
      });
    },
    // 详情
    detailLink(id) {
      // 使用路由跳转到名为"DetailDrainageLink"的页面
      this.$router.push({
        name: "DetailDrainageLink",
        // 设置查询参数
        query: {
          linkId: id, // 链接ID
          operateFlag: 'DETAIL' // 操作标志
        },
      });
    },
    // 编辑
    editLink(id) {
      this.$router.push({
        name: "EditDrainageLink",
        query: {
          linkId: id,
          operateFlag: 'EDIT'
        },
      });
    },
    // 编辑
    toStatistics(id) {
      this.$router.push({
        name: "DrainageLinkStatistics",
        query: {
          linkId: id,
        },
      });
    },
    // 复制链接
    handleCopy() {
      let clipboard = new this.clipboard(".tag-copy");
      clipboard.on("success", (e) => {
        this.$message({
          message: "复制链接成功!",
          type: "success",
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message({
          message: "复制链接失败!",
          type: "error",
          duration: 2000,
        });
        //清除选中
        e.clearSelection();
        //释放内存，以防重复复制
        clipboard.destroy();
      });
    },
    // 删除
    deleteItem(id) {
      this.delTable = true;
      this.linkId = id;
    },
    deleteLink() {
      this.delLoding = true;
      let obj = {

      }
      if(this.linkId) obj.id = this.linkId
      else obj.id = this.selectedRow.map(item => item.linkId).toString()
      deleteLink(obj).then((res) => {
        if (res.code === 200) {
          this.cancelDel();
          this.handleQuery();
          this.$message.success("删除成功！");
        } else {
          this.$message.error("删除失败！");
        }
        this.delLoding = false;
      });
    },
    // 取消删除
    cancelDel() {
      this.delTable = false;
      this.linkId = "";
    },
    // 实现单选
    handleSelectionChange(val, row) {
      console.log(val, 'handleSelectionChange')
      this.selectedRow = val
    },
    // 清除全选
    handleSelectAll(val, row) {
      console.log(val, 'handleSelectALl')
      this.selectedRow = val
    },
    // 删除数据
    beathDel(){
      this.delTable = true
      this.linkId = ''
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep .el-popconfirm .el-popconfirm__action .el-button .el-button--primary {
  font-size: 12px !important;
}
</style>
